<template>
  <div id="controlor">
    <el-button type="info" plain @click="drawerOpen" class="absolute-rc show-control-btn" icon="el-icon-caret-right"></el-button>
    <el-drawer
      size="550px"
      title="配置项"
      append-to-body
      :visible.sync="drawerShow"
      direction="rtl"
    >
      <div id="control-area">
        <el-collapse v-model="collapseActives">
          <el-collapse-item title="图标配置" name="1">
            <el-form ref="form" :model="iconConfig" label-width="80px">
              <el-form-item label="形状">
                <el-select v-model="iconConfig.shape" size="mini"
                  @change="(value) => handleChange('shape', value)"
                >
                  <el-option
                    v-for="item in shapeTypeOpts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="大小">
                <el-input-number v-model="iconConfig.size" @change="(value) => handleChange('size', value)" :min="1" :max="50" label="标记大小"></el-input-number>
              </el-form-item>
              <el-form-item label="颜色">
                <el-color-picker
                  v-model="iconConfig.color"
                  show-alpha
                  :predefine="predefineColors"
                  @change="(value) => handleChange('color', value)"
                >
                </el-color-picker>
              </el-form-item>
              <el-form-item label="背景颜色">
                <el-color-picker
                  v-model="normalConfig.backgroundColor"
                  show-alpha
                  :predefine="predefineColors"
                  @change="(value) => handleChange('backgroundColor', value)"
                >
                </el-color-picker>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="城市选择" name="2">
            <el-transfer
              v-model="selectedCities"
              :titles="['未选择城市', '已选择城市']"
              filterable
              filter-placeholder="请输入城市拼音"
              :data="generateData"
              @change="handleTrans"
            >
            </el-transfer>
          </el-collapse-item>
          <el-collapse-item title="导出" name="3">
            <el-button size="mini" @click="handleOutput">导出图片</el-button>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import citiesGeoCoordMap from '../../../static/citiesGeoCoordMap';
import { mapGetters, mapActions } from 'vuex';
export default {
  name: 'controlor',
  props: {
  },
  data() {
    return {
      drawerShow: false, // 显示右侧控制面板
      selectedCities: ['北京', '上海', '广州', '深圳'], // 选中的城市,
      markData: [], // 标点的数据
      collapseActives: ['1', '2', '3'], // 折叠的控制
      shapeTypeOpts: this.getShapeTypeOpts(), // 标记形状可选值
      predefineColors: [ // 预设颜色列表
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
  computed: {
    ...mapGetters([
      'mapOption'
    ]),
    generateData() {
      const cities = [];
      for (let key in citiesGeoCoordMap) {
        let coord = citiesGeoCoordMap[key];
        cities.push({
          key,
          label: key,
          coord
        })
      }
      return cities;
    },
    // 标点的配置项
    iconConfig() {
      let mapOption = this.mapOption;
      return {
        shape: mapOption.series[0].symbol, // 标点形状
        color: mapOption.visualMap.color[0], // 标点颜色
        size: mapOption.series[0].symbolSize, // 标点大小
      }
    },
    // 一般配置项
    normalConfig() {
      let mapOption = this.mapOption;
      return {
        backgroundColor: mapOption.backgroundColor // 全局背景颜色
      }
    }
  },
  mounted() {
    this.handleTrans(null, 'right', this.selectedCities); // 初始标点
  },
  methods: {
    ...mapActions([
      'updateValue'
    ]),
    // 城市选择
    handleTrans(value, dis, changeVal) {
      if (dis === 'right') { // 添加
        changeVal.forEach(name => {
          this.markData.push({
            name,
            value: 233
          })
        })
      } else {
        this.markData = [] // 清空
        this.markData = value.map(name => { // 装入数据
          return {
            name,
            value: 123
          }
        })
      }
      this.updateValue({type: 'data', value: this.markData})
      this.$emit('updateMap')
    },
    // 面板打开
    drawerOpen() {
      this.drawerShow = true;
    },
    // 通用值改变事件
    handleChange(type, value) {
      // this.$emit('handleChange', type, value)
      this.updateValue({type, value});
      this.$emit('updateMap');
    },
    // 生成形状可选项
    getShapeTypeOpts() {
      let shapeType = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'];
      let typeText = ['圆形', '正方形', '圆角矩形', '三角形', '棱形', '地点标记', '箭头', '无'];
      let output = shapeType.map((item, index) => {
        return {
          value: item,
          label: typeText[index]
        }
      })
      return output;
    },
    // 导出图片
    handleOutput() {
      this.$emit('handleOutput')
    }
  }
}
</script>
<style>
#control-area {
  padding: 20px;
}
.absolute-rc {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(50%);
}
#controlor .show-control-btn {
  background-color: rgba(244, 244,245, 0.2);
  border-color: #333;
  border-radius: 4px 0 0 4px;
  border-right-width: 0;
  color: #333;
  padding: 12px 8px;
}
</style>